import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

// Vue.directive(指令名, 配置对象(写各种钩子函数))
Vue.directive('fiximg', {
  // 这里面的钩子指定使用这个指令的元素在不同生命周期触发的函数
  inserted(el) {
    // console.log('元素插入页面。指令被调用')
    // console.log(el)
    el.onerror = () => {
      // 直接写 @ 符号只会当成字符串,
      // 需要像 nodejs 一样加载模块的方式加载图片才行
      el.src = require('./assets/common/微信图片_20220209182347.jpg')
    }
    // 处理错误以外, 没有 src 也需要处理, 因为不会触发错误
    // 需要手动操作
    el.src = el.src || require('./assets/common/微信图片_20220209182347.jpg')
  },
  update(el) {
    // 除了插入时, 当页面更新是, 也需要重新检查 src 是否为空,
  // 可以使用 update 的钩子
    el.src = el.src || require('./assets/common/微信图片_20220209182347.jpg')
  }
})
// 全局注册组件的方式演示
// import PageTools from '@/components/PageTools'
// // Vue.component(组件名字符串, 组件对象)
// Vue.component('PageTools', PageTools)

import myPlugins from '@/components/myPlugins'
Vue.use(myPlugins)

// 过滤器创建演示
// Vue.filter(过滤器名, 过滤器函数体 旧数据=>新数据)
// Vue.filter('formDate', oldVal => {
//   return (new Date(oldVal)).toLocaleDateString()
// })

// import { formatDate } from '@/filters'
// Vue.filter('formatDate', formatDate)

// 如果要将一大堆函数同时注册成过滤器需要两步
// 1. 引入所有的函数
import * as myFunctions from '@/filters'
// console.log(myFunctions)
// 2. 遍历所有引入的函数, 逐个注册
// Vue.filter(过滤器名, 函数体)
for (const key in myFunctions) {
  // forin 循环可以遍历一个对象中的所有 key
  // console.log('函数名', key)
  // console.log('函数体', myFunctions[key])
  // 这个 key 可以作为过滤器名称, 另外可以用这个 key 在对象中取回函数体
  Vue.filter(key, myFunctions[key])
}
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

